<!-- 用户管理 -->
<template>
  <div class="app-container accountManagement">
    <!-- <div style="width: 100px; height: 100px; background-color: aqua"></div> -->
    <el-row :gutter="20">
      <el-col :lg="4" :xs="24" class="mb-[12px] menuLeft">
        <el-card body-style="height:calc(100vh - 150px)">
          <!-- <el-menu active-text-color="#409eff" background-color="#1d1e1f" class="el-menu-vertical-demo"
            default-active="Menu" text-color="#fff" @select="handleSelect">
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <UserFilled />
                </el-icon>
                <span>账号管理</span>
              </template>

<el-menu-item index="account">账号列表</el-menu-item>

</el-sub-menu>
<el-sub-menu index="2">
  <template #title>
                <el-icon>
                  <Setting />
                </el-icon>
                <span>设备设定</span>
              </template>

  <el-menu-item index="deviceSpec">设备规格设定</el-menu-item>
  <el-menu-item index="deviceModel">设备型号</el-menu-item>
</el-sub-menu>
<el-sub-menu index="3">
  <template #title>
                <el-icon>
                  <Setting />
                </el-icon>
                <span>设备类型</span>
              </template>

  <el-menu-item index="DeviceType">设备类型</el-menu-item>
</el-sub-menu>
<el-sub-menu index="4">
  <template #title>
                <el-icon>
                  <Setting />
                </el-icon>
                <span>设备管理</span>
              </template>
  <el-menu-item index="Device">设备管理</el-menu-item>
</el-sub-menu>
<el-menu-item index="User">
  <img src="@/assets/set.png" alt="" style="width: 18px;height: 18px;margin:0 8px 0 3px;">
  <span>用户管理</span>
</el-menu-item>
<el-menu-item index="Role">
  <img src="@/assets/set.png" alt="" style="width: 18px;height: 18px;margin:0 8px 0 3px;">
  <span>角色管理</span>
</el-menu-item>
<el-menu-item index="Menu">
  <img src="@/assets/set.png" alt="" style="width: 18px;height: 18px;margin:0 8px 0 3px;">
  <span>菜单管理</span>
</el-menu-item>

</el-menu> -->

          <el-menu active-text-color="#409eff" background-color="#1d1e1f" class="el-menu-vertical-demo"
            :default-active="defaultActive" text-color="#fff" @select="handleSelect">
            <SidebarMenuItem2 v-for="route in accountManagementRoute" :key="route.path" :item="route"
              :base-path="resolvePath(route.path)" />
          </el-menu>
        </el-card>
      </el-col>

      <!-- 用户列表 -->
      <el-col :lg="20" :xs="24">
        <component :is="componentToShow"></component>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "accountManagement",
  inheritAttrs: false,
});

import deviceSpec from "./component/deviceSpec.vue";
import account from "./component/account.vue";
import deviceModel from "./component/deviceModel.vue";
import DeviceType from "./devicetype/index.vue";
import Device from "./device/index.vue";
import User from "../system/user/index.vue";
import Role from "../system/role/index.vue";
import Menu from "../system/menu/index.vue";
import Upgrade from "../upgrade/index.vue";
import UpgradeDev from "../upgrade/device.vue";
import { usePermissionStore } from "@/store";
const permissionStore = usePermissionStore();
const currentRoute = useRoute();
// 查找包含 "name": "accountManagement" 的对象
const accountManagementRoute = permissionStore.routes
  .flatMap(route => route.children) // 将所有 children 展开
  .find(child => child ? child.name === currentRoute.name : false)?.children;
function resolvePath(routePath: string) {

  // 完整绝对路径 = 父级路径(/system) + 路由路径(/user)
  // const fullPath = path.resolve(props.basePath, routePath);
  return routePath;
}


let componentToShow: any = ref('');
let defaultActive = ref('')

function handleSelect(key: string) {
  defaultActive.value = key
  componentToShow.value = judgePath(key)
}



const judgePath = (path: any) => {
  console.log(path);

  sessionStorage.setItem('componentToShow', path);
  if (path === 'deviceSpec') {
    return deviceSpec
  } else if (path === 'account') {
    return account
  } else if (path === 'DeviceType') {
    return DeviceType
  } else if (path === 'deviceModel') {
    return deviceModel
  } else if (path === 'Device') {
    return Device
  } else if (path === 'User') {
    return User
  } else if (path === 'Role') {
    return Role
  } else if (path === 'Menu') {
    return Menu
  } else if (path === 'Upgrade') {
    return Upgrade
  } else if (path === 'UpgradeDev') {
    return UpgradeDev
  } else {
    return
  }
}
onMounted(() => {
  let defaults = sessionStorage.getItem('componentToShow');
  handleSelect(defaults ? defaults : 'Device')
});
</script>
<style lang="scss" scoped>
.accountManagement {
  .menuLeft {
    height: calc(100vh - 162px);
    margin-bottom: 0;
  }

  :deep(.el-card__body) {
    padding: 0;
  }

  :deep(.el-menu) {
    border-right: 0;
  }
}



.tree_rightmenu {
  position: fixed;
  padding: 5px 0;
  margin: 0;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 2px 2px 8px 0 hsla(0, 0%, 59%, 0.2);
  list-style: none;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;

  .tree_rightmenu_item {
    padding: 2px 14px;
    color: #333;

    &:hover {
      background-color: #46a0fc;
      color: #fff;
    }
  }
}

.flex-between {
  display: flex;
  justify-content: space-between;

  .btnLeft {
    display: flex;
    align-items: center;

    .btn {
      padding: 0 12px;
      border-radius: 15px;
      height: 31px;
      line-height: 31px;
      cursor: pointer;
      margin-right: 20px;

      &.active {
        background: linear-gradient(167deg, #5cadff, #2a6cad);
      }
    }
  }

  .cotentRight {
    display: flex;
    align-items: center;

    div {
      margin-left: 26px;
      font-weight: 700;

      span {
        margin-left: 8px;
      }
    }
  }
}
</style>
